<template>
    <div>
        <el-row>
            <el-col :span="17" :offset="1">
                <div>
                    <h2>{{ currentNews.title }}</h2>
                    <div class="time">
                        {{ whichTime(currentNews.editTime) }}
                    </div>
                    <el-divider>
                        <el-icon><star-filled /></el-icon>
                    </el-divider>
                    <div v-html="currentNews.content"></div>
                </div>
            </el-col>
            <el-col :span="4" :offset="1" :pull="1">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span style="font-size: 16px;font-weight: 700;">最近新闻</span>
                        </div>
                    </template>
                    <div v-for="item in topNews" :key="item._id" class="text item" style="padding: 14px;"
                        @click="handleChange(item._id)">
                        <span>{{ item.title }}</span>
                        <div class="bottom">
                            <time class="tab-time">{{ whichTime(item.editTime) }}</time>
                        </div>
                    </div>
                    <template #footer>Footer content</template>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { watchEffect, ref } from 'vue'
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import whichTime from '@/util/util'
import { StarFilled } from '@element-plus/icons-vue'
const route = useRoute()
const router = useRouter()
const currentNews = ref({})
const topNews = ref([])
watchEffect(async () => {
    // console.log(route.params.id)
    const res1 = await axios.get(`/webapi/news/list/${route.params.id}`)
    currentNews.value = res1.data.data[0]

    const res2 = await axios.get(`/webapi/news/toplist?limit=4`)
    console.log(res2)
    topNews.value = res2.data.data
})

const handleChange = (id) => {
    console.log(id)
    router.push(`/news/${id}`)
}

</script>

<style scoped lang="scss">
.el-row {
    margin-top: 30px;
}

.time,
.tab-time {
    font-size: 13px;
    color: gray;
}
</style>